<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{padding: 0;margin:0;}
			#picture{
				width: 800px;
				margin: auto;
				height: 600px;
				margin-top: 30px;
				box-shadow: 4px 10px 23px #ccc;
				border: 1px solid #ccc;
				text-align: center;
				position: relative;
			}
			h2{
				height: 80px;
				line-height: 80px;
			}
			img{
				position: absolute;
				left: 352px;
				top: 8px;
				width:100px;
				height: 76px;
				box-shadow: 4px 8px 8px #999;
				transition: all 1s;
			}
			.img0{left: 24px;top: 110px;}
			.img1{left: 154px;top: 130px;}
			.img2{left: 274px;top: 80px;}
			.img3{left: 404px;top: 115px;}
			.img4{left: 542px;top: 150px;}
			.img5{left: 664px;top: 80px;}
			.img6{left: 34px;top: 240px;}
			.img7{left: 160px;top: 275px;}
			.img8{left: 278px;top: 200px;}
			.img9{left: 414px;top: 247px;}
			.img10{left: 664px;top: 224px;}
			.img11{left: 26px;top: 370px;}
			.img12{left: 152px;top: 400px;}
			.img13{left: 304px;top: 310px;}
			.img14{left: 544px;top: 290px;}
			.img15{left: 670px;top: 355px;}
			.img16{left: 34px;top: 500px;}
			.img17{left: 178px;top: 500px;}
			.img18{left: 290px;top: 420px;}
			.img19{left: 464px;top: 390px;}
			.img20{left: 680px;top: 500px;}
			.img21{left: 570px;top: 454px;}
			.img22{left: 444px;top: 506px;}
			.img23{left: 312px;top: 520px;}
			.img24{left: 134px;top: 26px;}
			.img25{left: 524px;top: 30px;}
			
			#open{
				position: absolute;
				left: 50%;
				top: 16%;
				width: 480px;
				height: 360px;
				margin-left: -240px;
				border: 6px solid #000;
				display: none;
			}
			#meng{
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0,0,0,0.3);
				z-index: 99;
			}
			#lightBox{
				width: 480px;
				height: 360px;
				position: relative;
				z-index: 999;
			}
			#lightBox>img{
				position: absolute;
				left: 0;
				top: 0;
				width: 480px;
				height: 360px;
			}
			#lightBox>#close{
				position: absolute;
				bottom: 0px;
				right: 0;
				display: block;
				width: 40px;
				height: 40px;
				border-radius: 3px;
				background: url(img/close.jpg);
				background-size: 100%;
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div id="picture">
			<h2>好奇怪我只有我</h2>
			<img src="img/0.jpg"/>
			<img src="img/1.jpg"/>
			<img src="img/2.jpg"/>
			<img src="img/3.jpg"/>
			<img src="img/4.jpg"/>
			<img src="img/5.jpg"/>
			<img src="img/6.jpg"/>
			<img src="img/7.jpg"/>
			<img src="img/8.jpg"/>
			<img src="img/9.jpg"/>
			<img src="img/10.jpg"/>
			<img src="img/11.jpg"/>
			<img src="img/12.jpg"/>
			<img src="img/13.jpg"/>
			<img src="img/14.jpg"/>
			<img src="img/15.jpg"/>
			<img src="img/16.jpg"/>
			<img src="img/17.jpg"/>
			<img src="img/18.jpg"/>
			<img src="img/19.jpg"/>
			<img src="img/20.jpg"/>
			<img src="img/21.jpg"/>
			<img src="img/22.jpg"/>
			<img src="img/23.jpg"/>
			<img src="img/24.jpg"/>
			<img src="img/25.jpg"/>
		</div>
		<div id="open">
			<div id="meng"></div>
			<div id="lightBox">
				<img id="oImgbox" src="" alt="" />
				<span id="close"></span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var oPicture=document.getElementById("picture");
		var oImg=oPicture.getElementsByTagName("img");
		var oPen=document.getElementById("open");
		var oMeng=oPen.children[0];
		var oImgbox=document.getElementById("oImgbox");
		var oClose=document.getElementById("close");

		function lightBox(){
			for(var i=0;i<oImg.length;i++){
				oImg[i].style.opacity="0"; //隐藏所有picture下的图片
				oImg[i].onclick=function(){				
					oPen.style.display="block"; //点击时出现
					oMeng.style.width=document.documentElement.clientWidth+"px";
					oMeng.style.height=document.documentElement.clientHeight+"px";
					oImgbox.src=this.src;   //换图
					oClose.onclick=function(){
						oPen.style.display="none"; //点击关闭
					}
				}
			}
		}
		lightBox();	
		var arr=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]; //定义随机出现的是哪一张图片的数组
		function rand(){
			var temp=parseInt(Math.random()*90-45); //-45度到45度之间
			var t;
			t=parseInt(Math.random()*arr.length);  //此时的 arr.length 已经是改变之后的数组的长度
//			console.log(arr[t]); 
			oImg[arr[t]].className="img"+arr[t];
			oImg[arr[t]].style.opacity=1;
			oImg[arr[t]].style.transform="rotate("+temp+"deg)";
			arr.splice(t,1);   //不需要返回，数组就能被改变 每次剔除一个
		}
		function addImg(){   //添加图片的定时器函数		
			rand();
			if(arr.length==0){
				clearInterval(timer)
			}
		}
		var timer=setInterval(addImg,1000);
	</script>
</html>
